/**
 * 作者:TL(tongling19890103@126.com)
 * 时间：2020-07-17.
 * 功能：
 */

layui.use(['tree', 'layer','laypage','element','layedit'], function(){
    var layer = layui.layer
        ,element = layui.element
        ,$ = layui.jquery;

    // 切换li标签
    $(".bottomMain-info li").on('click',function(){
        var itemIndex = $(this).index()
        if($(this).hasClass('active')){
            return;
        }else{
            $(this).addClass('active').siblings().removeClass('active');
            $(this).parents(".tab-nav-box").find('.tab-nav-content').hide()
            $(this).parents(".tab-nav-box").find('.tab-nav-content').eq(itemIndex).show()
        }
    })
    $("#knowleLink").on("click",function(){
        layer.msg('你点击的是知识链接')
    })
    $("#knowlePush").on("click",function(){
        layer.msg('你点击的是推送')
    })
    $("#knowleStop").on("click",function(){
        layer.msg('你点击的是废止')
    })
    $("#knowleDownload").on("click",function(){
        layer.msg('你点击的是下载')
    })

    // 调用生成点击量图表
    setecharts("1","year");
    setecharts("2","year");
     /**
       * 获取点击量图表
       *
       * @param {string} type 1：知识点击量，2：客服点击量
       * @param {string} dateType 日期类型 年year ，月month，周week ，日date
       */
    function setecharts(type,dateType){
        // 查询条件-知识库名称  后面有需要用到的就从这取
        var knowHouse = $("#knowHouseName").val();
        // 根据类型判断塞哪张图表
        if(type === '1'){//生成知识点击量图表
            // 基于准备好的dom，初始化echarts实例
            var chart1 = echarts.init(document.getElementById('chart1'));

            // 指定图表的配置项和数据
            var option1 = {
                color: ['#1ebff2'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {},
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库6', '知识库5', '知识库26',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                            '知识库1', '知识库2', '知识库3', '知识库4', '知识库5', '知识库6', '知识库7',
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '知识库',
                        type: 'bar',
                        data: [
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220
                        ]
                    }
                ],
                'dataZoom':[
                    {
                        type: 'inside',// 内置于坐标系中
                        start: 0,
                        end: 20,
                        // moveOnMouseWheel: 'shift',
                        show: true,
                        xAxisIndex: [0],
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            chart1.setOption(option1);
            // 重绘图表
            resizeChart(1);
        }else{//生成客服点击量图表
            // 基于准备好的dom，初始化echarts实例
            var chart2 = echarts.init(document.getElementById('chart2'));

            // 指定图表的配置项和数据
            var option2 = {
                color:'#FFC54B',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {},
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                            '客服1', '客服2', '客服3', '客服4', '客服6', '客服5', '客服26',
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                            '客服1', '客服2', '客服3', '客服4', '客服5', '客服6', '客服7',
                        ],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '客服点击',
                        type: 'bar',
                        data: [
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220,
                            10, 52, 200, 334, 390, 330, 220
                        ]
                    }
                ],
                'dataZoom':[
                    {
                        type: 'inside',// 内置于坐标系中
                        start: 0,
                        end: 20,
                        // moveOnMouseWheel: 'shift',
                        show: true,
                        xAxisIndex: [0],
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            chart2.setOption(option2);
            // 重绘图表
            resizeChart(2);
        }

    }

    // 点击量切换（年、月、周、日）
    $(document).on("click",".btn-group .btn",function(){
        if($(this).hasClass("active")){
            return ;
        }
        $(this).addClass("active").siblings().removeClass("active");
        if(Number($(this).data("type")) === 1){
            layer.msg("您点击了知识点击量的"+$(this).data("date"))
            setecharts("1",$(this).data("date"));
        }else{
            layer.msg("您点击了客服点击量的"+$(this).data("date"))
            setecharts("2",$(this).data("date"));
        }
    })
    // 导出功能
    $(document).on("click",'.export-btn',function(){
        var knowHouseName = $("#knowHouseName").val();
        var dateType = $(this).parents(".card-title").find("button.active").data("date");
        layer.msg('导出的值：'+knowHouseName+" 日期类型："+dateType);
        if($(this).data("type") === 'zhishi'){//知识导出
            window.open("http://downza109.d.aldcup.com/download/Axure%20RP%20Pro_023213093.exe");
        }else{//客服导出
            window.open("http://downza109.d.aldcup.com/download/Axure%20RP%20Pro_023213093.exe");
        }
    })


});
// 图表自适应
function resizeChart(type){
    var todaypieId1 = document.getElementById("chart1");
    var todaypieId2 = document.getElementById("chart2");
    if(type === 1){
        if (!todaypieId1) {
            return false;
        }
    }else{
        if (!todaypieId2) {
            return false;
        }
    }
    setTimeout(() => {
        window.onresize = function () {
            self.chart_today1 = echarts.init(
                todaypieId1
            );
            self.chart_today2 = echarts.init(
                todaypieId2
            );
            self.chart_today1.resize();
            self.chart_today2.resize();
        };
    }, 20);
}

